<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dplayer</title>

  <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
</head>

<body>
  <div class="app">
    Hello World!
    <img class="card-img-top" src="https://hellorfimg.zcool.cn/provider_image/preview260/2234602015.jpg" data-video="https://static.hellorf.com/v180629120952/hellorf/video/images/HomepageReel_062515.orig.mp4">
    <video controls="">
      <source src="https://static.hellorf.com/v180629120952/hellorf/video/images/HomepageReel_062515.orig.mp4">
    </video>
    <div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content" id="videoModal"></div>
      </div>
    </div>
  </div>
</body>
<script>
  var player = null
  $(document).ready(function () {
    $('#myModal').on('hidden.bs.modal', function (e) {
      if (player && player.pause) player.pause()
    })

    $('.card-img-top').click(function (e) {
      var video = $(this).data('video')
      var image = $(this).attr('src')

      $('#myModal').modal('show')

      if (!player) {
        player = new DPlayer({
          container: document.getElementById('videoModal'),
          screenshot: true,
          video: {
            url: video,
            pic: image,
            thumbnails: image
          }
        })
      } else {
        player.switchVideo({
          url: video,
          pic: image,
          type: 'auto'
        })
      }
    })
  })
</script>

</html>